<template>
<Content>

  <div class="demo-split">
          <div slot="top" class="demo-split-pane">
              <Button  icon="md-add" type="primary" @click="domainsadd()">新增</Button>
          </div>
           <Divider />
          <div slot="bottom" class="demo-split-pane">
            <vxe-table
              border
              highlight-hover-row
              highlight-current-row
              show-overflow
              resizable
              max-height="529"
              row-id="id"
              :loading="loading"
              :data="domainsData">
              <vxe-table-column type="checkbox" width="60"></vxe-table-column>
              <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
              <vxe-table-column field="key" title="域唯一标识"></vxe-table-column>
              <vxe-table-column field="domain" title="域"></vxe-table-column>
              <vxe-table-column field="exp_time" title="过期时间"></vxe-table-column>
              <vxe-table-column field="sort" title="排序" sortable></vxe-table-column>
              <vxe-table-column field="status" title="状态"></vxe-table-column>
              <vxe-table-column title="操作" fixed="right" width="200">
                <template v-slot>
                  <vxe-button type="text">按钮1</vxe-button>
                  <vxe-button type="text">按钮2</vxe-button>
                </template>
              </vxe-table-column>
            </vxe-table>
            <vxe-pager
              :loading="loading"
              :current-page="domainsPage.page"
              :page-size="domainsPage.pagesize"
              :total="domainsPage.totalResult"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="domainsHandlePageChange">
            </vxe-pager>
          </div>
  </div>

  <DomainsEdit ref="edit" />

</Content>
</template>
<script>
import config from "@/config";
import ax from "@/utils/axios";
import { _domainslist } from "@/services/auth/domains.js";
import IConfig from "@/layouts/partials/Config";
import IError from "@/layouts/partials/Error";
import DomainsEdit from "./DomainsEdit";
export default {
  data () {
    return {
      loading: false,
      domainsData: [],
      domainsPage: {
        page: 1,
        pagesize: 10,
        totalResult: 0
      }
    }
  },
  components: {
    DomainsEdit
  },
  created () {
    this.domainslist()
  },
  methods: {
      domainslist(){

        this.loading = true;
        _domainslist(this.domainsPage)
          .then(res => {
             this.domainsData = res.data.data;
             this.domainsPage.totalResult = res.data.total
             this.loading = false;
          })
          .catch((err) => {
            this.$Loading.error(err);
            this.$store.commit("LOADING", false);
            this.loading = false;
          });
      },
      domainsHandlePageChange ({ currentPage, pageSize }) {
        this.domainsPage.page = currentPage
        this.domainsPage.pagesize = pageSize
        this.domainslist()
      },
      domainsadd(){
         this.$refs["edit"].handleModal("添加域","Create"); // 显示创建模态框
      }
  }
}
</script>
<style scoped>
h3 {
  margin-top: 16px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.payload {
  color: #2d8cf0;
}
.demo-split{
    height: 750px;
    border: 1px solid #dcdee2;
}
.demo-split-pane{
    padding: 10px;
}
</style>
